<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 请求接口示例</title>
    <style>
        button {
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>请求本地接口示例</h1>
    <!-- 点击按钮触发请求 -->
    <button onclick="fetchData()">发起请求</button>
    <!-- 用于展示响应结果 -->
    <div id="result" style="margin-top: 20px;"></div>

    <script>
        // 接口地址
        const apiUrl = 'http://localhost:7461/user/profile';
        // 请求头信息，这里替换成你实际的 Token
        const headers = {
            'Authorization': 'eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTE1NDYxNjMsInVzZXJJZCI6IjE5MzgxOTQzMDY1MjMzMzY3MDQifQ.Tj5EFQorSt2QVi4i0JG7QxV0ezWFpnOk6ATQUZUKWNk',
            // 如果接口需要指定 Content-Type 等其他头，也可以加上
            // 'Content-Type': 'application/json' 
        };

        function fetchData() {
            // 使用 fetch 发起 GET 请求
            fetch(apiUrl, {
                method: 'GET',
                headers: headers
            })
                .then(response => {
                    // 处理响应状态，非 2xx 状态码视为失败
                    if (!response.ok) {
                        throw new Error(`HTTP 错误！状态码：${response.status}`);
                    }
                    // 解析响应为 JSON（根据接口实际返回类型调整，也可能是 text 等）
                    return response.json();
                })
                .then(data => {
                    // 将响应数据展示在页面上
                    document.getElementById('result').innerHTML = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    // 捕获错误并展示
                    document.getElementById('result').innerHTML = `请求失败：${error.message}`;
                });
        }
    </script>
</body>

</html>